import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'index',
    redirect: '/button'
  },
  {
    path: '/guide',
    name: 'guide',
    component: () => import('../views/GuidePage.vue')
  },
  {
    path: '/button',
    name: 'button',
    component: () => import('../views/ButtonExample.vue')
  },
  {
    path: '/link',
    name: 'link',
    component: () => import('../views/LinkExample.vue')
  },
  {
    path: '/form',
    name: 'form',
    component: () => import('../views/FormExample.vue')
  },
  {
    path: '/table',
    name: 'table',
    component: () => import('../views/TableExample.vue')
  },
  {
    path: '/select',
    name: 'select',
    component: () => import('../views/SelectExample.vue')
  },
  {
    path: '/input',
    name: 'input',
    component: () => import('../views/InputExample.vue')
  },
  {
    path: '/radio',
    name: 'radio',
    component: () => import('../views/RadioExample.vue')
  },
  {
    path: '/switch',
    name: 'switch',
    component: () => import('../views/SwitchExample.vue')
  },
  {
    path: '/message',
    name: 'message',
    component: () => import('../views/MessageExample.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('../views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: 'active'
})

export default router
